<template>
    <div class="index">
        <van-nav-bar title="代理补货" left-arrow @click-left="backUp"></van-nav-bar>
        <div class="index-container"></div>
        <section class="pro">
            <ul class="pro-list">
                <li v-for="item in goodslist" :key="item.goodsId">
                    <router-link :to="{name:'replenishgoods',query:{ goods_id: item.goodsId }}">
                        <img v-lazy="item.subImage"/>
                        <h4>
                            <van-tag type="danger" style="margin: 0 5px;">补货</van-tag>
                            {{item.goodsName}}
                        </h4>
                        <s>库存：{{item.inventory}}</s>
                        <p>补货价：&yen;{{item.price}}</p>
                    </router-link>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
    import Vue from "vue";
    import api from "../../utils/restful";
    import {Row, Col, Rate, Tag} from "vant";

    export default {
        components: {
            [Row.name]: Row,
            [Col.name]: Col,
            [Rate.name]: Rate,
            [Tag.name]: Tag
        },
        data() {
            return {
                goodslist: []
            };
        },
        mounted() {
            this.getVipGoodsList();
        },
        methods: {
            getVipGoodsList() {
                this.$axios({
                    method: "post",
                    url: api.replenishList,
                    data: this.$qs.stringify({
                        token: localStorage.getItem("token")
                    })
                }).then(res => {
                    if (res){
                        this.goodslist = res.data;
                    }
                });
            },
            backUp() {
                this.$router.go(-1);
            }
        }
    };
</script>

<style lang="less" scoped>
    // @import '../../assets/style/common.less';
    // 优化写法  @符号代表src目录  但是样式引入样式 需要在@符号前面加个~
    // @import '~@/assets/style/common.less';
    //再次优化  配置好别名之后  可以简写为： 在main.js 里不用加~
    @import "~style/common.less";

    .van-icon-xingxing:before {
        content: "\e610";
        position: relative;
        top: 50%;
        // left: -2Px;
        transform: translateY(-20%);
    }

    // 1px border
    .setTopLine(@c:@borderColor) {
        position: relative;
        &:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid @c;
        }
        [data-dpr="1"] &:before {
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
        }
    }

    .index {
        // background-color: @borderColor;
        background-color: @bgColor;

        .pro {
            margin: 0 20px;
            margin-bottom: 48px;

            .pro-title {
                display: flex;
                justify-content: space-between;
                align-items: center;

                h3 {
                    .font-dpr(14px);
                    color: @fontColorH3;
                    line-height: 3;
                    font-weight: 500;
                }

                span {
                    .font-dpr(12px);
                    color: @tipColor;
                    line-height: 3;
                    font-weight: 500;
                }
            }

            .pro-list {
                // margin: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;

                li {
                    box-sizing: border-box;
                    padding: 0 5px;
                    flex-basis: 49%;
                    background-color: @borderColor;
                    // border: 1px solid red;
                    margin-bottom: 10px;
                    border-radius: 6px;

                    img {
                        display: block;
                        width: 100px;
                        height: 80px;
                        margin: 30px auto;
                    }

                    h4 {
                        .font-dpr(12px);
                        color: @fontColorH3;
                        line-height: 1.5;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        /* autoprefixer: off */
                        -webkit-box-orient: vertical;
                        /* autoprefixer: on */
                        -webkit-line-clamp: 1;
                    }

                    s {
                        .font-dpr(12px);
                        text-decoration: none;
                        color: @fontColorP;
                        line-height: 1;
                        margin: 10px;
                    }

                    p {
                        .font-dpr(13px);
                        color: @secColor;
                        font-weight: 500;
                        line-height: 1;
                        margin: 10px;
                    }
                }
            }
        }
    }

    .van-tabbar {
        height: 48px;
        // transform: translateY(-50%);
        &-item {
            color: @fontColorH3 !important;

            &--active {
                color: @priColor !important;
            }

            &__icon {
                .font-dpr(16px) !important;
            }

            &__text {
                .font-dpr(12px) !important;
            }
        }
    }

    /deep/ .van-nav-bar .van-icon {
        .font-dpr(28px) !important;
        color: @fontColorP !important;
    }

    .product-title {
        .textoverflow(1);
    }
</style>
